<template>
	<view class="department-page">
		

		<!-- 医院信息卡片 -->
		<view class="hospital-card">
		  <image class="hospital-logo" :src="hospitalInfo.logo" mode="widthFix" />
		  <view class="hospital-info">
		    <text class="hospital-name">{{ hospitalInfo.name }}</text>
		    <view class="tag-group">
		      <text class="tag tag-level">{{ hospitalInfo.level }}</text>
		      <text class="tag tag-type">{{ hospitalInfo.type }}</text>
		    </view>
		    <text class="hospital-address">地址：{{ hospitalInfo.address }}</text>
		  </view>
		</view>

		<!-- 科室列表标题 -->
		<view class="section-header">
			<view class="header-marker"></view>
			<text class="header-text">科室列表</text>
		</view>

		<!-- 科室列表 -->
		<view class="department-list">
			<view class="department-item" v-for="(item, index) in departments" :key="index"
				:class="{ last: index === departments.length - 1 }">
				<text  @click="toChoose(index)">{{ item }}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from "@dcloudio/uni-app"
	import { ref } from "vue"
	
	interface HospitalInfo {
	  logo: string
	  name: string
	  level: string
	  type: string
	  address: string
	}
	
	interface Department {
	  did: number
	  hid: number
	  title: string
	}
	
	// 使用ref定义医院信息
	const hospitalInfo = ref<HospitalInfo>({
	  logo: '/static/yiyuanlogo.png',
	  name: '',
	  level: '',
	  type: '',
	  address: ''
	})
	
	// 修正初始值为空数组
	const departments = ref<string[]>([])
	const typelist = ref<Department[]>([])
	
	onLoad((options) => {
			console.log('页面参数:', options)
			const data = uni.getStorageSync('depar')
			console.log(data);
			// 接收参数
			if (options.data) {
				try {
					const data = JSON.parse(decodeURIComponent(options.data))
					hospitalInfo.value = {
						logo: data.logo || '/static/yiyuanlogo.png',
						name: data.title || '未知医院',
						level: data.grade || '',
						type: data.category || '',
						address: data.address || ''
					}
				} catch (e) {
					console.error('解析医院数据失败:', e)
				}
			}
	
			// 获取科室
			uni.request({
				url: "http://localhost:3010/hospital/subject",
				method: 'POST',
				header: {
					'Content-Type': 'application/x-www-form-urlencoded',
					'Authorization': 'Bearer ' + uni.getStorageSync('token')
				},
				data: {
					hid: data.hid || 0
				},
				success(res) {
					// console.log('完整API响应:', JSON.stringify(res.data, null, 2))
	
					if (res.data && res.data.code === 200) {
						// 处理科室数据
						const resultData = res.data.data?.result || []
	
						if (resultData.length > 0) {
							typelist.value = resultData
							departments.value = resultData.map(item => item.title)
						} else {
							console.warn('科室数据为空，医院ID:', options.hid)
							uni.showToast({
								title: '该医院暂无科室数据',
								icon: 'none',
								duration: 2000
							})
						}
					} else {
						console.error('API请求失败:', res.data)
						uni.showToast({
							title: res.data?.msg || '获取科室数据失败',
							icon: 'none'
						})
					}
				},
				fail(err) {
					console.error("网络请求失败:", err)
					uni.showToast({
						title: '网络请求失败，请稍后重试',
						icon: 'none'
					})
				}
			})
		})
	
	const navigateBack = () => {
	  uni.navigateBack()
	}
	
	const toChoose = (index) => {
		uni.setStorageSync('type',typelist.value[index])
	uni.navigateTo({
		url:'/pages/Changke/Changke'
	})
	}
</script>

<style scoped lang="scss">
	.department-page {
		background-color: #F5F5F5;
		min-height: 100vh;

		// 导航栏
		.navbar {
			display: flex;
			align-items: center;
			height: 88rpx;
			background: #FFFFFF;
			padding: 0 24rpx;
			border-bottom: 1px solid #ECECEC;
			margin-top: 90rpx;

			.back-icon {
				margin-right: 16rpx;
			}

			.page-title {
				font-size: 36rpx;
				color: #00CC71;
				font-weight: 700;
			}
		}

		// 医院信息卡片
		.hospital-card {
			display: flex;
			align-items: center;
			background: #FFFFFF;
			border-radius: 20rpx;
			box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05);
			margin: 20rpx;
			padding: 24rpx;

			.hospital-logo {
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
			}

			.hospital-info {
				display: flex;
				flex-direction: column;

				.hospital-name {
					font-size: 32rpx;
					font-weight: 700;
					margin-bottom: 8rpx;
				}

				.tag-group {
					display: flex;
					gap: 10rpx;
					margin-bottom: 8rpx;

					.tag {
						padding: 6rpx 16rpx;
						border-radius: 16rpx;
						font-size: 24rpx;
						color: #FFFFFF;
					}

					.tag-level {
						background-color: #0066CC;
					}

					.tag-type {
						background-color: #1A91DB;
					}
				}

				.hospital-address {
					font-size: 24rpx;
					color: #999;
				}
			}
		}

		// 科室列表标题
		.section-header {
			display: flex;
			align-items: center;
			margin: 30rpx 20rpx 10rpx;

			.header-marker {
				width: 6rpx;
				height: 32rpx;
				background-color: #00ff06;
				margin-right: 12rpx;
			}

			.header-text {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}
		}

		// 科室列表
		.department-list {
			margin: 10rpx 20rpx;

			.department-item {
				border-bottom: 1rpx solid black;
				padding: 24rpx 0;
				font-size: 36rpx;
				font-weight: 700;
				color: #333;

				&.last {
					border-bottom: none;
				}
			}
		}
	}
</style>
